<!--
<template>
  <div class="management-page">
    <div class="page-header">
      <p>管理系统用户信息</p>
    </div>

    <div class="content-card">
      <div class="card-header">
        <h3>用户列表</h3>
        <div class="header-actions">
          <button class="btn-primary">
            <i class="fa fa-plus"></i>
            新增用户
          </button>
          <button class="btn-secondary" @click="refreshData">
            <i class="fa fa-refresh"></i>
            刷新
          </button>
        </div>
      </div>

      <div class="card-body">
        <div class="table-container">
          <table class="data-table">
            <thead>
            <tr>
              <th>用户ID</th>
              <th>手机号</th>
              <th>昵称</th>
              <th>会员等级</th>
              <th>积分</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="user in users" :key="user.userId">
              <td>{{ user.userId }}</td>
              <td>{{ user.uMobile }}</td>
              <td>{{ user.uNickname }}</td>
              <td>{{ user.uL }}</td>
              <td>{{ user.uPoints }}</td>
              <td>
                <div class="action-buttons">
                  <button class="btn-action btn-info" @click="editUser(user)">编辑</button>
                  <button class="btn-action btn-danger" @click="deleteUser(user.userId)">删除</button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'UserManagement',
  setup() {
    const users = ref([])

    const refreshData = () => {
      users.value = [
        {
          userId: 1,
          uMobile: '138****1234',
          uNickname: '健身达人',
          uL: '黄金会员',
          uPoints: 1500
        },
        {
          userId: 2,
          uMobile: '139****5678',
          uNickname: '运动爱好者',
          uL: '普通会员',
          uPoints: 800
        }
      ]
    }

    const editUser = (user) => {
      alert(`编辑用户: ${user.uNickname}`)
    }

    const deleteUser = (userId) => {
      if (confirm('确定要删除这个用户吗？')) {
        alert(`删除用户ID: ${userId}`)
      }
    }

    onMounted(() => {
      refreshData()
    })

    return {
      users,
      refreshData,
      editUser,
      deleteUser
    }
  }
}
</script>

<style scoped>
.management-page {
  padding: 0;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h2 {
  color: #f8fafc;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.page-header p {
  color: #94a3b8;
  margin: 0;
}

.content-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.4);
}

.card-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.2rem;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.card-body {
  padding: 1.5rem;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.data-table th {
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e0;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-action {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-info {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.btn-danger {
  background: rgba(229, 62, 62, 0.15);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, 0.3);
}

.btn-action:hover {
  transform: translateY(-1px);
}

.btn-info:hover {
  background: rgba(102, 126, 234, 0.25);
  color: white;
}

.btn-danger:hover {
  background: rgba(229, 62, 62, 0.25);
  color: white;
}
</style>-->
<template>
  <div class="management-page">
    <div class="page-header">
      <p>管理系统用户信息</p>
    </div>

    <div class="content-card">
      <div class="card-header">
        <h3>用户列表</h3>
        <div class="header-actions">
          <button class="btn-primary" @click="showAddDialog = true">
            <i class="fa fa-plus"></i>
            新增用户
          </button>
          <button class="btn-secondary" @click="refreshData">
            <i class="fa fa-refresh"></i>
            刷新
          </button>
        </div>
      </div>

      <div class="card-body">
        <div class="table-container">
          <table class="data-table">
            <thead>
            <tr>
              <th>用户ID</th>
              <th>手机号</th>
              <th>昵称</th>
              <th>会员等级</th>
              <th>积分</th>
              <th>剩余天数</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="user in users" :key="user.userId">
              <td>{{ user.userId }}</td>
              <td>{{ user.uMobile }}</td>
              <td>{{ user.uNickname }}</td>
              <td>{{ getUserLevel(user.uPoints) }}</td>
              <td>{{ user.uPoints }}</td>
              <td>{{ user.uRt }}天</td>
              <td>
                <div class="action-buttons">
                  <button class="btn-action btn-info" @click="editUser(user)">编辑</button>
                  <button class="btn-action btn-danger" @click="deleteUser(user.userId)">删除</button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 新增/编辑用户对话框 -->
    <div v-if="showAddDialog || showEditDialog" class="modal-overlay">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ showAddDialog ? '新增用户' : '编辑用户' }}</h3>
          <button class="close-btn" @click="closeDialog">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitUser">
            <div class="form-group">
              <label>手机号:</label>
              <input
                  v-model="currentUser.uMobile"
                  type="text"
                  required
                  :readonly="showEditDialog"
                  placeholder="请输入手机号"
              />
            </div>
            <div class="form-group">
              <label>昵称:</label>
              <input
                  v-model="currentUser.uNickname"
                  type="text"
                  required
                  placeholder="请输入昵称"
              />
            </div>
            <div v-if="showAddDialog" class="form-group">
              <label>密码:</label>
              <input
                  v-model="currentUser.uPw"
                  type="password"
                  required
                  placeholder="请输入密码"
              />
            </div>
            <div class="form-group">
              <label>积分:</label>
              <input
                  v-model="currentUser.uPoints"
                  type="number"
                  min="0"
                  placeholder="请输入积分"
              />
            </div>
            <div class="form-group">
              <label>剩余天数:</label>
              <input
                  v-model="currentUser.uRt"
                  type="number"
                  min="0"
                  placeholder="请输入剩余天数"
              />
            </div>
            <div class="form-actions">
              <button type="button" class="btn-secondary" @click="closeDialog">取消</button>
              <button type="submit" class="btn-primary">{{ showAddDialog ? '新增' : '更新' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'UserManagement',
  setup() {
    const users = ref([])
    const showAddDialog = ref(false)
    const showEditDialog = ref(false)
    const currentUser = ref({
      uMobile: '',
      uPw: '',
      uNickname: '',
      uPoints: 0,
      uRt: 0
    })

    // 根据积分计算会员等级
    const getUserLevel = (points) => {
      if (points === 0) return '普通用户'
      if (points < 99) return '初级会员'
      if (points < 399) return '中级会员'
      return '高级会员'
    }

    // 获取用户列表
    const loadUsers = async () => {
      try {
        // 使用现有的排行榜接口获取用户数据
        const response = await fetch('/api/users/ranking')
        const result = await response.json()

        if (result.code === 200) {
          users.value = result.data
        } else {
          console.error('获取用户列表失败:', result.message)
          // 如果接口失败，使用模拟数据
          users.value = [
            {
              userId: 1,
              uMobile: '138****1234',
              uNickname: '健身达人',
              uPoints: 1500,
              uRt: 30
            },
            {
              userId: 2,
              uMobile: '139****5678',
              uNickname: '运动爱好者',
              uPoints: 800,
              uRt: 90
            }
          ]
        }
      } catch (error) {
        console.error('获取用户列表失败:', error)
        // 网络错误时使用模拟数据
        users.value = [
          {
            userId: 1,
            uMobile: '138****1234',
            uNickname: '健身达人',
            uPoints: 1500,
            uRt: 30
          },
          {
            userId: 2,
            uMobile: '139****5678',
            uNickname: '运动爱好者',
            uPoints: 800,
            uRt: 90
          }
        ]
      }
    }

    // 刷新数据
    const refreshData = () => {
      loadUsers()
    }

    // 新增用户
    const addUser = async () => {
      try {
        const response = await fetch('/api/users/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            mobile: currentUser.value.uMobile,
            password: currentUser.value.uPw,
            nickname: currentUser.value.uNickname
          })
        })

        const result = await response.json()

        if (result.code === 200) {
          alert('用户创建成功')
          closeDialog()
          refreshData()
        } else {
          alert('用户创建失败: ' + result.message)
        }
      } catch (error) {
        console.error('创建用户失败:', error)
        alert('创建用户失败，请检查网络连接')
      }
    }

   /* // 更新用户
    const updateUser = async () => {
      try {
        // 更新昵称
        const response = await fetch(`/api/users/${currentUser.value.userId}/nickname`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            nickname: currentUser.value.uNickname
          })
        })

        const result = await response.json()

        if (result.code === 200) {
          alert('用户更新成功')
          closeDialog()
          refreshData()
        } else {
          alert('用户更新失败: ' + result.message)
        }
      } catch (error) {
        console.error('更新用户失败:', error)
        alert('更新用户失败，请检查网络连接')
      }
    }

    // 提交用户表单
    const submitUser = () => {
      if (showAddDialog.value) {
        addUser()
      } else {
        updateUser()
      }
    }
*/
    // 更新用户
    const updateUser = async () => {
      try {
        // 更新用户信息（包括积分和剩余天数）
        const response = await fetch(`/api/users/${currentUser.value.userId}/info`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            points: parseInt(currentUser.value.uPoints) || 0,
            remainingDays: parseInt(currentUser.value.uRt) || 0
          })
        });

        const result = await response.json();

        if (result.code === 200) {
          alert('用户信息更新成功');
          closeDialog();
          refreshData();
        } else {
          alert('用户信息更新失败: ' + result.message);
        }
      } catch (error) {
        console.error('更新用户失败:', error);
        alert('更新用户失败，请检查网络连接');
      }
    }
    // 提交用户表单
    const submitUser = () => {
      if (showAddDialog.value) {
        addUser()
      } else {
        updateUser()
      }
    }
    // 编辑用户
    const editUser = (user) => {
      currentUser.value = { ...user }
      showEditDialog.value = true
    }

    // 删除用户
    const deleteUser = async (userId) => {
      if (confirm('确定要删除这个用户吗？此操作不可恢复！')) {
        try {
          const response = await fetch(`/api/users/${userId}`, {
            method: 'DELETE'
          });

          const result = await response.json();

          if (result.code === 200) {
            alert('用户删除成功');
            refreshData();
          } else {
            alert('用户删除失败: ' + result.message);
          }
        } catch (error) {
          console.error('删除用户失败:', error);
          alert('删除用户失败，请检查网络连接');
        }
      }
    }
    // 关闭对话框
    const closeDialog = () => {
      showAddDialog.value = false
      showEditDialog.value = false
      currentUser.value = {
        uMobile: '',
        uPw: '',
        uNickname: '',
        uPoints: 0,
        uRt: 0
      }
    }

    onMounted(() => {
      loadUsers()
    })

    return {
      users,
      showAddDialog,
      showEditDialog,
      currentUser,
      refreshData,
      editUser,
      deleteUser,
      getUserLevel,
      submitUser,
      closeDialog
    }
  }
}
</script>

<style scoped>
.management-page {
  padding: 0;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h2 {
  color: #f8fafc;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.page-header p {
  color: #94a3b8;
  margin: 0;
}

.content-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.4);
}

.card-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.2rem;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.card-body {
  padding: 1.5rem;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.data-table th {
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e0;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-action {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-info {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.btn-danger {
  background: rgba(229, 62, 62, 0.15);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, 0.3);
}

.btn-action:hover {
  transform: translateY(-1px);
}

.btn-info:hover {
  background: rgba(102, 126, 234, 0.25);
  color: white;
}

.btn-danger:hover {
  background: rgba(229, 62, 62, 0.25);
  color: white;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #f8fafc;
}

.close-btn {
  background: none;
  border: none;
  color: #cbd5e0;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: white;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #cbd5e0;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.form-actions button {
  padding: 0.75rem 1.5rem;
}
</style>